<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${cMoment.id == null ? '发布' : '编辑'}动态</title>
    <%@include file="../../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/static/uploadCI/upload.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
    <style type="text/css">
        .ci-img-list .item {
            width: 150px !important;
            height: 120px !important;
            /* 		margin-bottom: 50px; */
            margin-bottom: 10px;
            margin-right: 10px;
            float: left;
        }

        .ci-img-list .item .img-item {
            position: relative;
            width: 150px !important;
            height: 120px !important;
            margin-bottom: 0px !important;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            cursor: pointer;
            float: none;
        }

        .ci-img-list .item .text-item {
            width: 148px;
            height: 30px;
            border: 1px solid #efefef;
        }

        .c-user-logo {
            width: 60px;
            height: 60px;
            display: inline-block;
            background-size: cover;
            border-radius: 50%;
            border: 1px solid #efefef;
            margin-right: 10px;
        }

        .c-user-name {
            position: absolute;
            top: 34%;
        }


        .tag-wrap-category {
            border: 1px solid #f1eeec;
            min-height: 45px;
            min-width: 300px;
            padding: 5px;
            float: left;
            margin-right: 10px;
        }

        .tag-wrap-category .tag-item-category {
            float: left;
            margin: 5px 10px 5px 5px;
            padding: 5px 10px;
            background: #fff0f3;
            position: relative;
        }

        .tag-wrap-category .tag-name-category {
            line-height: 25px;
            display: inline-block;
            vertical-align: middle;
            float: left;
            margin-right: 5px;
        }

        .tag-wrap-category .tag-item-category .category-opt {
            vertical-align: sub;
            color: #e8473f;
        }

        .tag-wrap-category .tag-item-category.active {
            color: #fff;
            background: #f4615c;
        }
    </style>

    <style>
        .member-cell {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -moz-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

        .member-cell .member-logo {
            display: inline-block;
            /*float: left;*/
            width: 30px;
            height: 30px;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            line-height: 50px;
            -webkit-background-size: cover;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .member-cell .member-name {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            line-height: 30px;
            padding-left: 5px;
            display: inline-block;
            text-align: left;
        }

        .member-cell .member-logo-img {
            width: 30px;
            height: 30px;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
    </style>

</head>
<body>
<!--头部-->
<%@include file="../../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/member/moment/save.do">
                    <input type="hidden" name="id" value="${cMoment.id}"/>

                    <c:if test="${member!=null}">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">发布者</label>
                                <div class="member-cell layui-input-inline"
                                     onclick="openDialogShow('用户名片','${ctx}/system/member/memberView.do?id=${member.id}','400px','470px')">
                                    <div class="member-logo common-img">
                                        <img src="<c:if test="${member.logo!= null}">${member.logo}?imageMogr2/auto-orient/crop/126x126</c:if>"
                                             alt="" onerror="txz.errImg(this)"
                                             onload="txz.imgLoad(this)">
                                    </div>
                                    <div class="member-name ellipsis-1">
                                        <a class="blue" title="${member.realname}"
                                           href="javascript:void(0);">${member.realname}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </c:if>
                    <c:if test="${!isChild || cMoment !=null || isXzgsAdmin}">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">发布机构</label>
                                <div class="layui-input-inline">
                                    <select name="createBy" lay-filter="createBy"
                                            id="createBy" ${cMoment.createBy != null ? 'disabled="disabled"' : ''}>
                                        <c:forEach var="memberGroup" items="${memberGroupList}">
                                            <option value="${memberGroup.id}" ${memberGroup.id == cMoment.createBy ? 'selected="selected"' : ""}>${memberGroup.realname}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </c:if>
                    <div class="layui-form-item" id="momentTypeDiv">
                        <div class="layui-inline">
                            <label class="layui-form-label">动态类型</label>
                            <div class="layui-input-inline">
                                <select name="momentType" lay-filter="momentType" id="momentType"
                                        lay-verify="momentType"  ${cMoment.momentType != null ? 'disabled="disabled"' : ''}>
                                    <c:if test="${cMoment== null}">
                                        <option value="0">系统通知
                                        </option>
                                        <option value="1">新会员加入
                                        </option>
                                    </c:if>
                                    <c:if test="${cMoment!= null}">
                                        <c:forEach var="momentType" items="${momentTypes}">
                                            <option value="${momentType.key}" ${momentType.key!=1 || momentType.key !=0  ?'disabled="disabled"':''} ${momentType.key== cMoment.momentType ? 'selected="selected"' : ''}>${momentType.value}</option>
                                        </c:forEach>
                                    </c:if>
                                </select>
                            </div>
                        </div>
                    </div>
                    <%-- 文字--%>
                    <div class="layui-form-item">
                        <label class="layui-form-label">文字<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block">
                            <textarea name="content" lay-verify="content" class="layui-textarea" style="resize: none"
                                      id="content">${cMoment.content}</textarea>
                        </div>
                    </div>

                    <%-- 系统通知--%>
                    <div id="momentType_system_Div" ${cMoment.momentType == 0 || cMoment == null ? 'style="display: block"' : 'style="display: none"'}>
                        <div class="layui-form-item"
                             id="dataTypeDiv" ${cMoment.momentType == 0 || cMoment == null ? 'style="display: block"' : 'style="display: none"'} >
                            <label class="layui-form-label">数据类型<span class="f-verify-red">*</span></label>
                            <div class="layui-inline">
                                <li class="form-item-inline">
                                    <div class="layui-input-inline">
                                        <select id="dataType" name="dataType" lay-verify="dataType"
                                                id="dataType" ${cMoment.dataType != null ? 'disabled="disabled"' : ''}
                                                lay-filter="dataType">
                                            <option value="1" ${1 == cMoment.dataType ? 'selected="selected"' : ""}>图文
                                            </option>
                                            <option value="2" ${2 == cMoment.dataType ? 'selected="selected"' : ""}>视频
                                            </option>
                                        </select>
                                    </div>
                                </li>
                            </div>
                        </div>

                        <%-- 视频--%>
                        <div class="layui-form-item"
                             id="audioDiv" ${cMoment.dataType == 2 ? 'style="display: block"' : 'style="display: none"'}>
                            <label class="layui-form-label">视频文件<span class="f-verify-red">*</span></label>
                            <div class="cover-content">
                                <div class="layui-input-inline">
                                    <input type="text" id="multimediaUrl" name="multimediaUrl" class="layui-input"
                                           lay-verify="multimediaUrl" value="${cMoment.multimediaUrl}" readonly/>
                                </div>
                                <div class="u-single-upload">
                                    <input type="file" class="u-single-file" id="audioFile" name="audioFile"> <span
                                        class="u-single-upload-icon">+上传</span>
                                </div>
                                <div class="form-word-aux">.mp4文件(文件过大则上传时间长，请耐心等待)</div>
                            </div>
                        </div>
                    </div>
                    <%-- 图片--%>
                    <div class="layui-form-item"
                         id="picDiv" ${(cMoment.dataType == 1|| cMoment.momentType == 2 || cMoment.momentType == 3 || cMoment.momentType == 4 || cMoment.momentType == 6) || cMoment == null ? 'style="display: block"' : 'style="display: none"'}>
                        <label class="layui-form-label">动态图片<span class="f-verify-red"></span></label>
                        <div class="layui-input-block">
                            <input type="hidden" name="pics" id="picList" lay-verify="picList"/>
                            <div class="ci-img-list" id="img_list">
                                <c:forEach var="resource" items="${cMoment.picList}">
                                    <div class="item" data-url="${resource}">
                                        <div class="img-item" style="background-image: url('${resource}')">
                                            <i class="layui-icon del-icon"
                                               onclick="delQImg('${resource}',this)">&#x1007;</i>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                            <a href="javascript:openUploadCI()" class="layui-btn  layui-btn-danger">+添加图片</a>
                        </div>
                    </div>

                    <%-- 新会员加入--%>
                    <div id="momentType_newMember_Div" ${cMoment.momentType == 1 ? 'style="display: block"' : 'style="display: none"'}>
                        <div class="layui-form-item selectedMember">
                            <div class="layui-inline">
                                <label class="layui-form-label">新会员加入<span class="f-verify-red">*</span></label>
                                <div class="layui-input-block">
                                    <a href="javascript:txz.selectNewMemberUtil.selectMember('.selectedMember .tag-wrap');"
                                       class="layui-btn layui-btn-danger">选择会员</a>
                                    <input type="hidden" name="members" value="${cMoment.businessIds}" id="members"
                                           lay-verify="members"/>
                                    <div class="tag-wrap" id="memberIdsDiv" style="max-width: 900px; min-width: 500px">
                                        <c:forEach var="member" items="${members}">
                                            <div class="tag-item" data-id="${member.id}">
                                                <span class="tag-name">${member.realname}</span>
                                                <span name="event_form_item_ctrl" class="icon-close-new"></span>
                                            </div>
                                        </c:forEach>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style=" margin-top: 120px;">
                        <div class="layui-input-block">
                            <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
                            <a href="javascript:history.back();" class="layui-btn layui-btn-primary">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div><!--底部-->
        <%@include file="../../include/footer.jsp" %>
    </section>
    <%@include file="../../notify/selectNewMemberInclude.jsp" %>
</div>
<script type="text/javascript" src="${ctxStatic}/cos-js-sdk-v4-master/dist/cos-js-sdk-v4.js"></script>
<script type="text/javascript" src="${ctx}/script/upload/cosUploadUtil.js"></script>
<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '动态管理',
            href: '${ctx}/member/moment/list.do'
        }, {
            name: '${cMoment.id == null ? '添加' : '编辑'}动态',
            curr: true
        }],
        btns: [{
            type: 'back'
        }]
    });
</script>
<script>
    $(function () {
        var memberId = '${memberId}';
        var cosUtil = new CosUtil({
            mainFolder: "/audio/",
            bucketType: 1,// 0: 图片, 1: 文件
            insertOnly: 0,//insertOnly==0 表示允许覆盖文件 1表示不允许
            onProgress: function (file, ret) {

            }
        }).init();
        var momentType_val = '${cMoment.momentType}';
        var dataType_val = '${cMoment.dataType}';

        layui.use(['form'], function () {
            var form = layui.form;
            // 动态类型
            form.on('select(momentType)', function (data) {
                var value = $(data.elem).find("option:selected").attr("value");
                if (value == 0) {
                    momentType_val = 0
                    $("#momentType_newMember_Div").css('display', 'none');
                    $("#momentType_system_Div").css('display', 'block');
                    $("#picDiv").css('display', 'block');
                } else if (value == 1) {
                    momentType_val = 1
                    $("#momentType_system_Div").css('display', 'none');
                    $("#picDiv").css('display', 'none');
                    $("#momentType_newMember_Div").css('display', 'block');
                }
                form.render('select');
            });

            // 数据类型
            form.on('select(dataType)', function (data) {
                var value = $(data.elem).find("option:selected").attr("value");
                if (value == 1) {
                    dataType_val = 1;
                    $("#audioDiv").css('display', 'none');
                    $("#picDiv ").css('display', 'block');
                } else if (value == 2) {
                    dataType_val = 2;
                    $("#picDiv").css('display', 'none');
                    $("#audioDiv").css('display', 'block');
                }
                form.render('select');
            });


            $('#audioFile').change(function () {

                var files = document.getElementById("audioFile").files;
                var newFiles = new Array(1);
                newFiles[0] = files[0];
                console.log(files[0])
                var fileName = files[0].name;

                if (fileName.lastIndexOf(".mp4") < 0) {
                    util.layerMsgError("请正确上传.mp4格式的视频");
                    return;
                }
                cosUtil.opt.mainFolder = cosUtil.opt.mainFolder + memberId + "/";

                // 查看视频文件是否已经存在
                cosUtil.opt.onSuccess = function (file, result) {
                    layer.confirm('该视频文件已经存在, 确定要覆盖吗?', {icon: 3, title: '提示'}, function (index) {
                        layer.close(index);
                        uploadCert(newFiles);
                    });
                };
                cosUtil.opt.onFailure = function (file, result) {
                    uploadCert(newFiles);
                }
                cosUtil.getFileStat(newFiles[0]);

            });

            function uploadCert(newFiles) {
                var loadIndex = top.layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });

                // 上传附件
                cosUtil.opt.onSuccess = function (file, result) {
                    top.layer.close(loadIndex);
                    console.log(result.data)
                    $("#multimediaUrl").val(result.data.access_url);
                    util.layerMsgSuccess("视频文件上传成功");
                    console.log(result);
                };
                cosUtil.opt.onFailure = function (file, result) {
                    top.layer.close(loadIndex);
                    util.layerMsgError("视频文件上传失败");
                    console.log(result);
                    form.render();
                }
                cosUtil.uploadFile(newFiles);
            }

            form.verify({
                content: function (value) {
                    if (!util.isValid(value)) {
                        return "请输入动态内容";
                    }
                    if (value.length > 50) {
                        return "动态内容不能大于50字";
                    }
                },
                picList: function () {
                    var length = $("#img_list .img-item").length;
                    if (dataType_val == 1 || length>0) {
                        if (length > 9) {
                            return "最多上传9张图片，请删除多余图片";
                        }
                    }
                },
                multimediaUrl: function (value) {
                    if (dataType_val == 2) {
                        if (!util.isValid(value)) {
                            return "请上传视频";
                        }
                    }
                },
                members: function (value) {
                    if (momentType_val == 1) {
                        var _membersArray = new Array();
                        $(".tag-wrap .tag-item").each(function (index, elem) {
                            var memberId = $(elem).data("id");
                            _membersArray.push(memberId);
                        });
                        if (_membersArray.length == 0) {
                            return "请选择新会员";
                        }
                    }
                }
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var picList = new Array();
                    $("#img_list .item").each(function (index, element) {
                        picList.push($(element).attr("data-url"));
                    });
                    $("#picList").val(picList.join("|"));


                    if (momentType_val == 1) {
                        //新用户
                        var _membersArray = new Array();
                        $(".tag-wrap .tag-item").each(function (index, elem) {
                            var memberId = $(elem).data("id");
                            _membersArray.push(memberId);
                        });
                        var memberIds = _membersArray.join(",");
                        $("#members").val(memberIds);
                    }

                    $("#createBy").removeAttr("disabled")
                    $("#momentType").removeAttr("disabled")
                    if (momentType_val == 0) {
                        $("#dataType").removeAttr("disabled")
                        $("[name=members]").val(null);
                        if (dataType_val == 1) {
                            $("[name=multimediaUrl]").val(null);
                        } else if (dataType_val == 2) {
                            $("[name=pics]").val(null);
                        }
                    } else {
                        $("[name=dataType]").val(null);
                        if (dataType_val == 1) {
                            $("[name=pics]").val(null);
                        } else if (dataType_val == 2) {
                            $("[name=multimediaUrl]").val(null);
                        }
                    }


                    var action = $("#myForm").attr("action");
                    $.post(action, $('#myForm').serialize(), function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            util.layerMsgSuccess("提交成功", function () {
                                location.href = '${ctx}/member/moment/list.do';
                            })
                        } else {
                            util.layerMsgError("提交失败")
                        }
                    });
                })
                return false;
            });
            form.render('radio');
        });
    })

    function openUploadCI() {
        txz.openSelImg({
            min: 1,
            type: '<%=TargetType.MOMENT.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        $("#img_list").append(
                            '<div class="item" data-url="' + item.path + '">' + '<div class="img-item" style="background-image: url('
                            + item.path + ')">' + '<i class="layui-icon del-icon" onclick="delQImg(\'' + item.path
                            + '\',this)">&#x1007;</i>' + '</div>' +
                            '</div>');
                    }
                }
            }
        })
    }

    function delQImg(picUrl, obj) {
        $(obj).closest(".item").remove();
    }

    function openDialog(title, url, width, height, cb, target) {
        layer.open({
            type: 2,
            area: [width, height],
            title: title,
            maxmin: true, //开启最大化最小化按钮
            content: url,
            btn: ['确定', '关闭'],
            yes: function (index, layero) {
                var body = layer.getChildFrame('body', index);
                var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                var inputForm = body.find('#inputForm');
                var top_iframe;
                if (target) {
                    top_iframe = target;//如果指定了iframe，则在改frame中跳转
                } else {
                    top_iframe = '_parent';//获取当前active的tab的iframe
                }
                inputForm.attr("target", top_iframe);//表单提交成功后，从服务器返回的url在当前tab中展示

                if (iframeWin.contentWindow.doSubmit()) {
                    cb(iframeWin.contentWindow.$);

                    setTimeout(function () {
                        top.layer.close(index);
                    }, 100);//延时0.1秒，对应360 7.1版本bug
                }

            },
            cancel: function (index) {
            }
        });
    }
</script>
</body>
</html>